import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/theme_provider.dart';

class ThemeSettingsPage extends StatelessWidget {
  const ThemeSettingsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('主题设置'),
      ),
      body: ListView(
        children: [
          _buildDarkModeSwitch(context, themeProvider),
          const Divider(),
          _buildThemeTitle(context),
          _buildThemeGrid(context, themeProvider),
        ],
      ),
    );
  }

  Widget _buildDarkModeSwitch(
      BuildContext context, ThemeProvider themeProvider) {
    return SwitchListTile(
      title: const Text('深色模式',
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
      subtitle: const Text('启用后将应用深色风格'),
      value: themeProvider.isDarkMode,
      activeColor: Theme.of(context).primaryColor,
      onChanged: (value) {
        themeProvider.toggleTheme();
      },
    );
  }

  Widget _buildThemeTitle(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(16.0),
      child: Text(
        '选择主题风格',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget _buildThemeGrid(BuildContext context, ThemeProvider themeProvider) {
    final themes = [
      {
        'name': '默认浅色',
        'color': Colors.green,
        'icon': Icons.light_mode,
      },
      {
        'name': '默认深色',
        'color': Colors.grey[800],
        'icon': Icons.dark_mode,
      },
      {
        'name': '绿色健康',
        'color': Colors.green[700],
        'icon': Icons.forest,
      },
      {
        'name': '蓝色清爽',
        'color': Colors.blue[700],
        'icon': Icons.water_drop,
      },
    ];

    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      padding: const EdgeInsets.all(16),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 1.5,
        crossAxisSpacing: 16,
        mainAxisSpacing: 16,
      ),
      itemCount: themes.length,
      itemBuilder: (context, index) {
        final theme = themes[index];

        return InkWell(
          onTap: () {
            if (index == 1 && !themeProvider.isDarkMode) {
              themeProvider.toggleTheme();
            } else if (index != 1 && themeProvider.isDarkMode) {
              themeProvider.toggleTheme();
            }
          },
          borderRadius: BorderRadius.circular(12),
          child: Container(
            decoration: BoxDecoration(
              color: theme['color'] as Color?,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.1),
                  blurRadius: 8,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  theme['icon'] as IconData,
                  size: 40,
                  color: Colors.white,
                ),
                const SizedBox(height: 8),
                Text(
                  theme['name'] as String,
                  style: const TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
